<template>
  <div class="customerRecord">
    <p class="remarks">
      【客户基本设置-客户查重规则】设置的查重字段，在导入模板中无法删除，并且强制为必填项
    </p>
    <div class="urlList">
      <draggable v-model="fields" handle=".move" animation="150">
        <div class="urlListItem" v-for="(item, index) in fields" :key="index">
          <div class="move" style="float: left; cursor: move" title="拖动排序">
            <i
              style="font-size: 12px"
              class="V7_iconfont V7_iconV7tubiao_yidong"
            ></i>
          </div>
          <el-tooltip effect="dark" :content="item.name" placement="top">
            <div class="url">{{ item.name }}</div>
          </el-tooltip>
          <div class="type">{{ item.typeName }}</div>
          <div class="operate">
            <el-checkbox
              v-model="item.required"
              :disabled="customerRepeatRules.includes(item.field)"
              >必填</el-checkbox
            >
          </div>
        </div>
      </draggable>
      <div @click="edit" class="add-btn">
        <i class="el-icon-plus" />添加字段
      </div>
    </div>
    <el-button type="primary" @click="onSubmit" size="mini">保存</el-button>
    <EditPanel ref="EditPanel" @editField="editField" :customerRepeatRules="customerRepeatRules"></EditPanel>
  </div>
</template>

<script lang="ts">
/**
 * 客户导入
 */
import { Component, Vue, Ref } from 'vue-property-decorator'
import { commonAction } from '@/utils/common'
import draggable from 'vuedraggable'
import EditPanel from '@/views/config/customerConfig/customerPanel/components/EditPanel.vue'
import { CommonModule } from '@/store/modules/common/index'
import { getTypeName } from '@/views/config/customerConfig/customerFields/components/typeMap'
@Component({
  name: 'CustomerRecord',
  components: { draggable, EditPanel }
})
export default class CustomerRecord extends Vue {
  [x: string]: any
  @Ref() private readonly EditPanel: any
  private fields: any = []

  private customFields: any = []

  private systemFields: any = []

  private customerRepeatRules: any = []

  // 获取配置
  private async getConfig () {
    const params = { url: '/server-crm/action/config/customer/panel/import', method: 'GET' }
    const result: any = await commonAction(params)
    if (result.success) {
      result.data.fields.map(item => {
        item.typeName = getTypeName(item.type)
      })
      this.fields = result.data.fields
    }
  }

  private getCusBase () {
    const params = { url: '/server-crm/action/config/customer/basic', method: 'GET' }
    commonAction(params).then(res => {
      if (res.success) {
        this.customerRepeatRules = res.data.customerRepeatRules
      }
    })
  }

  private async getFields () {
    // 清空数据
    this.customFields = []
    this.systemFields = []
    const params = ({ url: '/server-crm/action/config/customer/field/list', method: 'POST', data: {} })
    const result = await commonAction(params)
    if (result.success) {
      result.data.list.map(item => {
        if (item.editable || item.field === 'owner') {
          this.$set(item, 'check', false)
          if (item.category === 'custom') {
            this.customFields.push(item)
          } else if (item.category === 'system' && item.type !== 'attachment') {
            this.systemFields.push(item)
          }
        }
      })
    }
  }

  private activated () {
    this.getConfig()
    this.getFields()
    this.getCusBase()
  }

  private edit () {
    this.EditPanel.openDraw(this.systemFields, this.customFields, this.fields)
  }

  private editField (data: any = []) {
    this.$set(this, 'fields', data)
  }

  private async onSubmit () {
    if (!this.fields.length) {
      return this.$message.error('请添加字段')
    }
    const params = { url: '/server-crm/action/config/customer/panel/import', method: 'POST', data: { fields: this.fields } }
    const result: any = await commonAction(params)
    if (result.success) {
      (CommonModule as any).publicCache.customerImports = this.fields // 存入缓存
      this.$message.success('保存成功')
      this.getConfig()
    }
  }
}
</script>
<style lang="stylus" scoped>
.el-button
  position absolute
  right 24px
  bottom 24px
.customerRecord
  padding 16px
  border-radius 10px
  height calc(100% - 40px)
  overflow auto
  box-sizing border-box
  margin 0 2px 2px 0
  border 1px solid #ecf0f3
  box-shadow 0px 0px 4px 0px #e0e6f0,0px 1px 4px 0px #e0e6f0
  .V7_iconfont
    color #B3B9C7
    font-size 12px
  .add-btn
    cursor pointer
    color #008BEE
    margin-left 16px
    font-size 12px
    margin 20px 0
    .el-icon-plus
      margin-right 5px
  .remarks
    color #686E84
    font-size 12px
    margin-bottom 24px
  .urlList
    width 100%
    height calc(100% - 120px)
    overflow auto
    border 1px solid #ECF0F3
    border-radius 4px
    padding 20px
    .urlListItem
      line-height 32px
      font-size 12px
      display inline-flex
      margin 0 50px 20px 0
      .url
        width 60px
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        margin-left 10px
      .type
        width 200px
        height 32px
        border 1px solid #E7E9ED
        color #B3B9C7
        border-radius 4px
        margin 0 10px
        padding 0 12px
      .operate
        line-height 32px
        i
          font-size 12px
          color #B3B9C7
          margin-left 16px
          cursor pointer
        i:hover
          color $c-main
</style>
